/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-03 19:55:33
 * @LastEditTime: 2021-03-09 22:55:17
 * @LastEditors: 马爽
 */
import "./userlist.less"
import { FC, useEffect, useState } from "react";
import { useSelector, userManageModelState, useDispatch } from 'umi';
import { Table } from 'antd';

const UserShow:FC = () => {
  const dispatch = useDispatch();
  const [curIndex,setIndex] = useState(0);

  useEffect(() => {
    dispatch({
      type: 'user/tab',
      payload: 0
    })
  },[])
  
  let { tabOne } = useSelector((state:{userManage:userManageModelState}) => state.userManage);
  // console.log(tabOne);

  const columns0 = [
    {
      title: '用户名',
      dataIndex: 'user_name',
    },
    {
      title: '密码',
      dataIndex: 'user_pwd',
    },
    {
      title: '身份',
      dataIndex: 'identity_text',
    },
  ];

  const columns1 = [
    {
      title: '用户id',
      dataIndex: 'identity_id',
    },
    {
      title: '身份',
      dataIndex: 'identity_text',
    },
  ];

  const columns2 = [
    {
      title: 'api接口权限名称',
      dataIndex: 'api_authority_text',
    },
    {
      title: 'api接口权限url',
      dataIndex: 'api_authority_url',
    },
    {
      title: 'api接口权限方法',
      dataIndex: 'api_authority_method',
    },
  ];

  const columns3 = [
    {
      title: '身份',
      dataIndex: 'identity_text',
    },
    {
      title: 'api接口权限名称',
      dataIndex: 'api_authority_text',
    },
    {
      title: 'api接口权限url',
      dataIndex: 'api_authority_text',
    },
    {
      title: 'api接口权限方法',
      dataIndex: 'api_authority_method',
    },
  ];

  const columns4 = [
    {
      title: '视图权限',
      dataIndex: 'view_authority_text',
    }
  ];

  const columns5 = [
    {
      title: '身份',
      dataIndex: 'identity_text',
    },
    {
      title: '视图权限',
      dataIndex: 'view_authority_text',
    }
  ];

  // tabOne.forEach((item: { key: any; },index: any) => {
  //   console.log(item);
  // })

  const arr: any[] = [];
  tabOne.forEach((item: any,index: any) => {
    arr.push(Object.assign({},item,{'key':index}))
  })
  // console.log(arr);
  
  const data: readonly any[] | undefined = arr;

 

  let list = [
    '用户数据',
    '身份数据',
    'api接口权限',
    '身份和api接口关系',
    '视图接口权限',
    '身份和视图权限关系'
  ]

  const tabShow = (index:number) => {
    setIndex(index)
  }

  useEffect(() => {
    dispatch({
      type: 'userManage/tab',
      payload: curIndex
    })
  },[curIndex])
  
  return (
    <div className='box'>
      <h2>用户展示</h2>
      <div className="nav">
        {
          list.map((item,index) => {
            return (
              <span key={index}
                className={curIndex === index ? 'active' : ''}
                onClick={() => tabShow(index)}>
                {item}
              </span>
            )
          })
        }
      </div>
      <div>用户数据</div>
      <div className="table">
        {
          curIndex == 0 && <Table columns={columns0} dataSource={data} size="middle" />
        }
        {
          curIndex == 1 && <Table columns={columns1} dataSource={data} size="middle" />
        }
        {
          curIndex == 2 && <Table columns={columns2} dataSource={data} size="middle" />
        }
        {
          curIndex == 3 && <Table columns={columns3} dataSource={data} size="middle" />
        }
        {
          curIndex == 4 && <Table columns={columns4} dataSource={data} size="middle" />
        }
        {
          curIndex == 5 && <Table columns={columns5} dataSource={data} size="middle" />
        }
        
      </div>
      
    </div>
  );
}

export default UserShow;